    (function($){
        $.fn.extend({
            
            //pass the options variable to the function
            animateTST: function(options) {
                //Set the default values, use comma to separate the settings, example:
                var defaults = {
                	containerId: '[provide the id of the container which is to react]',
                    previewId: '[no previewId provided]',
                    detailId: '[no detailId provided]',
                    delay: 300,
                    duration: 500
                }
                    
                var options = $.extend(defaults, options);
            return this.each(function() {
                    var o = options;
                    var obj = $(this);
                    // set the parent and the detail container according to the height of the preview.                    
                    var heigtOfContainer = $(o.containerId).height();
                    var heightOfPreview = $(o.previewId).height();
                    $(o.detailId).css({'position': 'relative', 'display': 'block',});
                    var heightOfDetail = $(o.detailId).height();                   
                    $(o.detailId).css({'position': 'absolute', 'display': 'none',});
                    //alert($(o.containerId).height());
                    //alert("c "+heigtOfContainer + ", p " + heightOfPreview + ", d " + heightOfDetail);
                    if(heigtOfContainer < heightOfPreview || heigtOfContainer < heightOfDetail){
                    	if(heightOfPreview > heightOfDetail){
                    		$(o.containerId).height(heightOfPreview);                    		
        					$(o.detailId).height(heightOfPreview);
                    	}else{
                    		$(o.containerId).height(heightOfDetail);    
                    		$(o.previewId).height(heightOfDetail);    
                    	}                    		
                    }else{
                    	$(o.detailId).height(heigtOfContainer);    
                		$(o.previewId).height(heigtOfContainer);    
                    }              
                    //alert("c" + $(o.containerId).height());
                    
					$(o.containerId).mouseenter(
							function () {
								$(o.previewId).delay(o.delay).fadeOut(o.duration);								
								$(o.detailId).delay(o.delay*2).fadeIn(o.duration/2);
							   	 		   		
							}
						).mouseleave( 
								function(){									
									$(o.previewId).stop(true, false).fadeIn(o.duration,  function() {
								   		// Animation complete.
							   			$(o.previewId).css({opacity: 1});
							   	 	});
									//delay the fadeout, until the other divs are restored
									$(o.detailId).delay(o.duration).stop(true, false).fadeOut(o.duration);								
								}
						);                
            });
        }
        });
        
    })(jQuery);